<template>
    <BaseECharts :option="options" height="300px"></BaseECharts>
</template>

<script setup lang="ts">
import echarts from '@/components/baseECharts/config'
import type { ECOption } from '@/components/baseECharts/config'

const gaugeData = reactive({
    data1: [
        {
            value: 1852,
            name: '数据展示',
        },
    ],
    data2: [
        {
            value: 1673,
            name: '数据展示',
        },
    ],
    data3: [
        {
            value: 2378,
            name: '数据展示',
        },
    ],
})

setInterval(function () {
    gaugeData.data1[0].value = Number((Math.random() * 100).toFixed())
    gaugeData.data2[0].value = Number((Math.random() * 100).toFixed())
    gaugeData.data3[0].value = Number((Math.random() * 100).toFixed())
}, 2000)

/**
 * 自定义渲染
 * @param api echarts自定义渲染接口
 * @param radius 渲染的位置, 默认居中[0.5, 0.5]
 * @param ra1 外环半径比例
 * @param ra2 内圆半径比例
 * @param part 分割的段数
 * @param space 分割的间距
 * @param lineWidth 外环宽度
 * @param pointRadius 外环宽度
 * @param color 颜色列表，默认['外环颜色', '内圆颜色', '点颜色']
 */
const renderCustomElement = (
    api: any,
    radius = [0.5, 0.5],
    ra1 = 0.8,
    ra2 = 0.6,
    part: number,
    space: number,
    lineWidth = 6,
    pointRadius = 8,
    color = ['#8B4DE4', '#5470C630', '#D37DFF'],
) => {
    // 圆弧数组
    const arcArr: echarts.graphic.Arc[] = []
    // 画布宽度和高度
    const canvasWidth = api.getWidth()
    const canvasHeight = api.getHeight()
    // 当前图形相对画布渲染的位置
    const cx = canvasWidth * radius[0]
    const cy = canvasHeight * radius[1]
    // 画布内切圆半径
    const inscribedCircleRadius = getInscribedCircleRadius(canvasWidth, canvasHeight)
    // 当前图形半径
    const r1 = inscribedCircleRadius * ra1
    const r2 = inscribedCircleRadius * ra2
    // 圆点的位置
    const point = getCirclePoint(cx, cy, r1, -90)

    for (let index = 0; index < part; index++) {
        const angle = 360 / part
        const arc = customArc(cx, cy, r1, angle * index, angle * (index + 1) - space, { lineWidth, stroke: color[0] })
        arcArr.push(arc)
    }
    const circle1 = customCircle(cx, cy, r2, { fill: color[1] })
    const circle2 = customCircle(point.x, point.y, pointRadius, { fill: color[2] })

    return [...arcArr, circle1, circle2]
}

// 外环线宽
const lineWidth = 5
// 进度条宽度
const progressWidth = 5
// 进度条半径
const progressRadius = '51.5%'
// 进度条位置, [左右，上下]
const progressLeft = ['17%', '50%']
const progressCenter = ['50%', '50%']
const progressRight = ['83%', '50%']
// 间断圆环位置, [左右，上下]
const arcleft = [0.17, 0.5]
const arcCenter = [0.5, 0.5]
const arcRight = [0.83, 0.5]
// 间断圆环半径
const arcRadius = 0.5
// 内圆半径
const CircleRadius = 0.35
// 进度条颜色列表
const progressColorList = [
    new echarts.graphic.LinearGradient(0, 1, 0, 0, [
        { offset: 0, color: '#360CED' },
        { offset: 1, color: '#D37DFF' },
    ]),
    new echarts.graphic.LinearGradient(0, 1, 0, 0, [
        { offset: 0, color: '#360CED' },
        { offset: 1, color: '#56E4FF' },
    ]),
    new echarts.graphic.LinearGradient(0, 1, 0, 0, [
        { offset: 0, color: '#360CED' },
        { offset: 1, color: '#1C6700' },
    ]),
]

const options = reactive<ECOption>({
    graphic: [
        // 自定义左上角标题
        {
            type: 'group',
            children: (() => {
                const img = new URL('../../../images/title-box-1.png', import.meta.url).href
                const width = 127
                const height = 39
                const title = '实时销售量'
                return [
                    {
                        type: 'text',
                        style: {
                            align: 'center',
                            verticalAlign: 'middle',
                            text: title,
                            width: width,
                            height: height,
                            lineHeight: height,
                            x: width / 2,
                            y: height / 2,
                            fontSize: 18,
                            fontWeight: 'bold',
                            fill: '#fff',
                            backgroundColor: {
                                image: img,
                            },
                            textShadowBlur: 20,
                            textShadowColor: '#fff',
                        },
                    },
                ]
            })(),
        },
    ],
    series: [
        // 自定义图形, 外环 + 内圆 + 点
        {
            name: '',
            type: 'custom',
            tooltip: { show: false },
            coordinateSystem: 'none',
            renderItem: function (params, api) {
                const renderItem1 = renderCustomElement(api, arcleft, arcRadius, CircleRadius, 6, 8, lineWidth, 5, [
                    '#8B4DE4',
                    '#5470C630',
                    '#D37DFF',
                ])
                const renderItem2 = renderCustomElement(api, arcCenter, arcRadius, CircleRadius, 6, 8, lineWidth, 5, [
                    '#1D3BB7',
                    '#5470C630',
                    '#56E4FF',
                ])
                const renderItem3 = renderCustomElement(api, arcRight, arcRadius, CircleRadius, 6, 8, lineWidth, 5, [
                    '#1C6785',
                    '#5470C630',
                    '#1C6700',
                ])
                return {
                    type: 'group',
                    children: [...renderItem1, ...renderItem2, ...renderItem3],
                } as any
            },
            data: [0],
        },
        // 左
        {
            type: 'gauge',
            radius: progressRadius,
            center: progressLeft,
            startAngle: 90,
            endAngle: -270,
            data: gaugeData.data1,
            progress: {
                show: true,
                width: progressWidth,
                overlap: true,
                roundCap: true,
                clip: false,
                itemStyle: {
                    borderWidth: 0,
                    color: progressColorList[0],
                },
            },
            title: {
                color: '#fff',
                fontSize: 16,
                offsetCenter: ['0%', '25%'],
            },
            detail: {
                valueAnimation: true,
                fontSize: 26,
                color: '#8B4DE4',
                offsetCenter: ['0%', '-10%'],
                formatter: '{value}',
            },
            pointer: { show: false },
            axisLine: { show: false },
            splitLine: { show: false },
            axisTick: { show: false },
            axisLabel: { show: false },
        },
        // 中
        {
            type: 'gauge',
            radius: progressRadius,
            center: progressCenter,
            startAngle: 90,
            endAngle: -270,
            data: gaugeData.data2,
            progress: {
                show: true,
                width: progressWidth,
                overlap: true,
                roundCap: true,
                clip: false,
                itemStyle: {
                    borderWidth: 0,
                    color: progressColorList[1],
                },
            },
            title: {
                color: '#fff',
                fontSize: 16,
                offsetCenter: ['0%', '25%'],
            },
            detail: {
                valueAnimation: true,
                fontSize: 26,
                color: '#1D3BB7',
                offsetCenter: ['0%', '-10%'],
                formatter: '{value}',
            },
            pointer: { show: false },
            axisLine: { show: false },
            splitLine: { show: false },
            axisTick: { show: false },
            axisLabel: { show: false },
        },
        // 右
        {
            type: 'gauge',
            radius: progressRadius,
            center: progressRight,
            startAngle: 90,
            endAngle: -270,
            data: gaugeData.data3,
            progress: {
                show: true,
                width: progressWidth,
                overlap: true,
                roundCap: true,
                clip: false,
                itemStyle: {
                    borderWidth: 0,
                    color: progressColorList[2],
                },
            },
            title: {
                color: '#fff',
                fontSize: 16,
                offsetCenter: ['0%', '25%'],
            },
            detail: {
                valueAnimation: true,
                fontSize: 26,
                color: '#1C6785',
                offsetCenter: ['0%', '-10%'],
                formatter: '{value}',
            },
            pointer: { show: false },
            axisLine: { show: false },
            splitLine: { show: false },
            axisTick: { show: false },
            axisLabel: { show: false },
        },
    ],
})
</script>

<style lang="scss" scoped></style>
